/*
 * @Description: 收藏列表
 * @Author: kanglin
 * @Date: 2018-06-11 14:35:36
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
	.collection-stores{
		.header{
			padding: 0 38*@rem-per-px;
			height: 80*@rem-per-px;
		}
		.header-icon {
			margin: 21*@rem-per-px 0;
			line-height: 80*@rem-per-px;
			width: 38*@rem-per-px;
			height: 38*@rem-per-px;
			background-size: 100%;
			display: inline-block;
			background-repeat: repeat;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/icon_store.png');
		}
		.header-text {
			vertical-align: top;
			line-height: 80*@rem-per-px;
			font-size: 34*@rem-per-px;
			color: @main-font-color;
		}
		.body{
			background: #ffffff;
			padding-top: 28*@rem-per-px;
		}
		.body__list{
			list-style-type: none;
		}
		.body__list__item{
			margin-bottom: 38*@rem-per-px;
		}
		.body__list__item__thumb{
			margin-left: 38*@rem-per-px;
			float: left;
			border-radius: 10*@rem-per-px;
			width: 184*@rem-per-px;
			height: 184*@rem-per-px;
			overflow: hidden;
			// background: gray;
			position: relative;
			img{
				width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.body__list__item__content{
			margin-left: 254*@rem-per-px;
			width: 423*@rem-per-px;
			color: #444444;
			padding-top: 5*@rem-per-px;
			.content__name{
				font-size: 32*@rem-per-px;
				margin-bottom: 20*@rem-per-px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.content__address{
				font-size: 24*@rem-per-px;
				line-height: 42*@rem-per-px;
				max-height: 3.5em;
				overflow: hidden;
			}
			.content__phone{
				font-size: 24*@rem-per-px;
				margin-top: 18*@rem-per-px;
			}
			.content__address__icon{
				display: inline-block;
				width: 32*@rem-per-px;
				height: 32*@rem-per-px;
				background-size: 100%;
				vertical-align: -.2em;
				background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/icon_address.png')
			}
		}
	}

</style>

<template>
	<div class="collection-stores">
		<div class="header">
			<i class="header-icon" />
			<span class="header-text">
				{{ $t('collection.store') }}
			</span>
		</div>
		<div class="body">
			<ul class="body__list">
				<li
					v-for="(item) in stores"
					:key="item.id"
					class="body__list__item clearfix">
					<div class="body__list__item__thumb">
						<img
							:src="item.store_img"
							alt="">
					</div>
					<div class="body__list__item__content">
						<p class="content__name">{{ item.name }}</p>
						<p class="content__address">
							<i class="content__address__icon" />
							{{ item | area }} {{ item.address }}
						</p>
						<p class="content__phone">
							{{ $t('collection.contact') }}:&nbsp;
							{{ item.phone }}
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CollectionStores',
	filters: {
		area(store) {
			return [store.province, store.city, store.district].join('');
		},
	},
	props: {
		stores: {
			type: Array,
			required: true,
		},
	},
};
</script>
